<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <script>
        // Note: Load Taucharts and it's dependencies
        // considering that this page can be launched via `npm start`,
        // opened in node_modules or opened in separate downloaded folder.

        // Load development JS and CSS
        var loadDevTaucharts = loadJS.bind(null, '../dist/taucharts');
        var loadDevJS = loadJS.bind(null, 'index');
        var loadDevPlugins = loadJS.bind(null, [
            '../dist/plugins/annotations',
            '../dist/plugins/bar-as-span',
            '../dist/plugins/box-whiskers',
            '../dist/plugins/category-filter',
            '../dist/plugins/crosshair',
            '../dist/plugins/diff-tooltip',
            '../dist/plugins/export-to',
            '../dist/plugins/floating-axes',
            '../dist/plugins/geomap-legend',
            '../dist/plugins/geomap-tooltip',
            '../dist/plugins/layers',
            '../dist/plugins/legend',
            '../dist/plugins/parallel-brushing',
            '../dist/plugins/parallel-tooltip',
            '../dist/plugins/quick-filter',
            '../dist/plugins/settings',
            '../dist/plugins/tooltip',
            '../dist/plugins/trendline',
        ]);
        var loadDevCSS = loadCSS.bind(null, [
            '../dist/taucharts',
            '../dist/plugins/annotations',
            '../dist/plugins/category-filter',
            '../dist/plugins/crosshair',
            '../dist/plugins/diff-tooltip',
            '../dist/plugins/export-to',
            '../dist/plugins/legend',
            '../dist/plugins/quick-filter',
            '../dist/plugins/tooltip',
            '../dist/plugins/trendline',
        ]);
        var loadDevPluginsAndCSS = function (callbacks) {
            loadDevPlugins();
            loadDevCSS();
            loadDevJS();
        };
        var loadTaucharts = loadDevTaucharts.bind(null, {
            done: loadDevPluginsAndCSS
        });

        // Load JS dependencies from node_modules, neighbor node_modules or CDN
        var loadNodeModules = loadJS.bind(null, [
            '../node_modules/d3/dist/d3',
            '../node_modules/topojson-client/dist/topojson-client'
        ]);
        var loadCDN = loadJS.bind(null, [
            'https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3',
            'https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson'
        ]);

        // Start loading
        loadNodeModules({
            done: loadTaucharts,
            error: loadCDN.bind(null, {
                done: loadTaucharts
            })
        });

        function loadJS(url, callbacks) {
            createFileLinks(url, callbacks, function (url) {
                if (url.substring(url.length - 3) !== '.js') {
                    url += '.js';
                }
                var script = document.createElement('script');
                script.src = url;
                return script;
            });
        }

        function loadCSS(url, callbacks) {
            createFileLinks(url, callbacks, function (url) {
                if (url.substring(url.length - 4) !== '.css') {
                    url += '.css';
                }
                var style = document.createElement('link');
                style.rel = 'stylesheet';
                style.href = url;
                return style;
            });
        }

        function createFileLinks(url, callbacks, builder) {
            if (!Array.isArray(url)) {
                url = [url];
            }
            var urlCount = url.length;
            var wasError = false;
            var onLoad = function (e) {
                urlCount--;
                if (urlCount === 0 && callbacks && callbacks.done) {
                    callbacks.done.call(null);
                }
            };
            var onError = function (e) {
                urlCount--;
                if (wasError || !callbacks || !callbacks.error) {
                    return;
                }
                wasError = true;
                callbacks.error.call(null, e.error);
            };
            url.forEach(function (u) {
                var el = builder(u);
                el.onload = onLoad;
                el.onerror = onError;
                document.head.appendChild(el);
            });
        }
    </script>

    <style>
        html {
            height: 100%;
            width: 100%;
        }

        body {
            background-color: #fafafa;
            box-sizing: border-box;
            display: flex;
            font-family: Helvetica Neue, Segoe UI, Open Sans, Ubuntu, sans-serif;
            height: 100%;
            margin: 0;
            width: 100%;
        }

        /*-------------------------
            Filters section
        -------------------------*/

        #controls {
            background-color: #eee;
            flex: none;
            overflow: auto;
            padding: 3em 2em 0 2em;
            width: 12em;
        }

        .filter-section {
            display: flex;
            flex-direction: column;
            margin-bottom: 2em;
            padding-left: 0.5em;
        }

        .filter-section__header {
            font-weight: 300;
            margin: 0 0 0.5em -0.5em;
        }

        .filter-section label {
            cursor: pointer;
        }

        .check-group {
            display: flex;
            flex-direction: column;
        }

        .filter-section table input {
            width: 100%;
        }

        /*-------------------------
            Content section
        -------------------------*/

        main {
            display: flex;
            flex: 1;
            flex-direction: column;
            overflow: hidden;
        }

        #filterText {
            background: #fafafa;
            font-weight: 400;
            height: 2em;
            line-height: 2em;
            margin: 0;
            padding: 0 0.25em;
            position: fixed;
            right: 2.75em;
            text-align: right;
            z-index: 1;
        }

        #samplesContainer {
            flex: 1;
            overflow-y: scroll;
            padding: 2em;
        }

        .sample {
            flex-direction: column;
            display: inline-flex;
            padding: 1em 0 2em 0;
            height: 28em;
            overflow: hidden;
            width: 100%;
        }

        .sample__name {
            flex: none;
            font-weight: 300;
            margin: 0;
        }

        .sample__desc {
            flex: none;
            font-weight: 400;
            margin: 0;
        }

        .sample__desc:empty {
            display: none;
        }

        .sample__chart {
            flex: 1 1 auto;
            position: relative;
        }

        .sample__chart > * {
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }

        .sample__chart:empty::before {
            align-items: center;
            content: "Loading...";
            display: flex;
            font-size: 2em;
            font-weight: 300;
            height: 100%;
            justify-content: center;
            opacity: 0.25;
            position: absolute;
            width: 100%;
        }

        #samplesContainer::-webkit-scrollbar,
        #controls::-webkit-scrollbar,
        .tau-chart__layout__content::-webkit-scrollbar,
        .tau-chart__layout__sidebar-right::-webkit-scrollbar {
            height: 0.75em;
            width: 0.75em;
        }

        #samplesContainer::-webkit-scrollbar-thumb,
        #controls::-webkit-scrollbar-thumb,
        .tau-chart__layout__content::-webkit-scrollbar-thumb,
        .tau-chart__layout__sidebar-right::-webkit-scrollbar-thumb {
            background-color: #ccc;
        }
    </style>
    <style id="chartSizeStyle"></style>
</head>

<body>
    <div id="controls">
        <div class="filter-section">
            <h2 class="filter-section__header">Filter by path</h2>
            <input id="inputPath" />
        </div>
        <div class="filter-section">
            <h2 class="filter-section__header">Filter by types</h2>
            <div id="typesContainer" class="check-group"></div>
        </div>
        <div class="filter-section">
            <h2 class="filter-section__header">Plug-ins</h2>
            <div id="pluginsContainer" class="check-group"></div>
        </div>
        <div class="filter-section">
            <h2 class="filter-section__header">Chart size</h2>
            <table>
                <tr>
                    <td>Width</td>
                    <td><input id="inputWidth" /></td>
                </tr>
                <tr>
                    <td>Height</td>
                    <td><input id="inputHeight" /></td>
                </tr>
            </table>
        </div>
    </div>
    <main>
        <h4 id="filterText"></h4>
        <div id="samplesContainer"></div>
    </main>
</body>

</html>